<template>
    <div>
        <el-select v-model="selectValue" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading" @change="selectChange">
            <el-option v-for="item in options" :key="item.ownerId" :label="item.ownerName" :value="item.ownerId"></el-option>
        </el-select>
    </div>
</template>


<script>
import * as API from '@/api/business/car-owner'
export default {
    name: 'CardOwner',
    data() {
        return {
            options: [],
            list: [],
            loading: false,
            selectValue: '',
            orgId: ''
        }
    },
    props: {
        value: {
            type: String,
            default: ''
        }
    },
    watch: {
        value(val) {
            this.selectValue = val
        }
    },
    mounted() {
        this.list = []
    },
    methods: {
        remoteMethod(query) {
            this.loading = true
            API.load({ ownerName: query,orgId: this.orgId}).then(res => {
                this.loading = false
                this.options = res.data.data
            })
        },
        query(orgId){
            this.orgId = orgId
            this.options = []
            this.selectValue = ''
            API.load({ orgId: orgId}).then(res => {
                this.loading = false
                this.options = res.data.data

                this.selectValue = this.value
            })
        },
        selectChange(val) {
            this.$emit('input', val)
            console.log(val)
        }
    }
}
</script>